<template>
	<view>
	<view  style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);height: 310rpx;">
			<u-navbar title="积分明细" placeholder bg-color="transparent" :auto-back="true">
			
		
			</u-navbar>
		
		</view>
		<view class=" u-flex-y-center u-flex-between" style="margin-top: -140rpx;padding-top: 26rpx;padding-left:40rpx">
			
			<view>
				<view class="u-flex-y-center" style="align-items: baseline;"  @click="$u.route('/pages/member/score')">
					<view style="color: #FF8181;font-size: 88rpx;font-weight: bold;">{{user.score||0}}</view>
					<view class="u-f-32 u-bold u-m-l-10">积分</view>
				</view>
				<view class="u-f-24" style="color: #646464;margin-top: 15rpx;">我的积分</view>
				
			</view>
			<image src="/static/discount_bi.png" style="width: 440rpx;height: 297rpx;"></image>
		</view>
		<view class="u-p-30" style="padding-top: 0;">
			<view class="u-bg-fff u-flex-y-center u-flex-around" style="width: 690rpx;padding-top: 28rpx;padding-bottom: 28rpx;border-radius: 10%;">
				<view :class="status==index?'tabAct':'tab'" @click="clickTab(index)" v-for="(item,index) in list1">{{item.name}}</view>
			</view>
			<u-gap height="20rpx"></u-gap>
			<view class="u-bg-fff" style="padding: 20rpx 20rpx;">
				<view class="u-flex-between u-flex-y-center" style="padding-bottom: 28rpx;border-bottom: 1px solid #F7F7F9;margin-top: 32rpx;" v-for="(item,index) in list">
					<view>
						<view class="u-f-30">{{item.memo}}</view>
						<view class="u-f-24 u-m-t-6" style="color: #646464;">{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
					<view style="font-size: 40rpx;color: #141936;">
						{{item.type==1?'+':'-'}}{{item.score}}
					</view>
				</view>
				
			</view>
		</view>
			<u-gap height="100rpx"></u-gap>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {	
				user: {},
				
				list: [],
				page: 1,
				status:0,
				list1: [ {
					name: '支出明细',
				},{
					name: '收入明细',
				}]
			}
		},
		onLoad() {
			this.getUser()
			this.page = 1
			this.list = []
			this.getList()
		},
		
		onReachBottom() {
			this.getList()
		},
		methods: {
			clickTab(e){
								this.status = e
								this.list = []
								this.page = 1
								this.getList()
			},
			async getList() {
				if (this.page == -1) {
					return
				}
		
				let res = await uni.$u.http.post('user/scoreList', {
					page: this.page,
					type:this.status
					});
				let ls = getApp().mergePage(res, this.page, this.list);
				this.list = ls.list
				this.page = ls.total
			},
			
			async getUser() {
				let res = await uni.$u.http.post('user/index');
				this.user = res
		
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8FA;
	}
	.tab {
		font-size: 28rpx;
		color: #141936;
	}
	
	.tabAct {
		font-size: 28rpx;
		font-weight: 400;
		color: #EA4D44;
		position: relative;
	
		&:before {
			content: '';
			border-radius: 4rpx;
			width: 46rpx;
			height: 8rpx;
			bottom: -16rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #EA4D44;
			position: absolute;
		}
	}
</style>